<template>
  <div class="login">
    <div id="login_box">
      <div id="Login_page">
        <h2>登录页面</h2>
      </div>
      <!-- 登录表单 -->
      <!-- :rules属性：表单验证，fromRules值写在data中-->
      <!-- :model属性：表单的数据 -->
      <el-form
        label-width="100px"
        class="loginFrom"
        :model="fromData"
        hide-required-asterisk
        ref="loginRef"
      >
        <!-- 用户名 -->
        <!-- clearable属性：可快速清空 -->
        <!-- prefix-icon属性：给el-input首部添加图标 -->
        <!-- el-input尾部添加图标可以查看element-ui官网 -->
        <!-- 由于element-ui给我们提供的图标有限，所以我们可以使用第三方图标库，这里我们使用阿里图标库 -->
        <!-- prop属性：指定验证规则 prop='user'：该form-item使用表单验证内的account验证（定义在data中） -->
        <el-form-item label="用户名">
          <el-input
            placeholder="请输入用户名"
            clearable
            v-model="fromData.user"
            prefix-icon="iconfont icon-zhanghao"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <!-- show-password属性：表示input为密码类型的文本框 -->
        <!--  prefix-icon属性：设置图标 -->
        <el-form-item label="密码">
          <el-input
            placeholder="请输入密码"
            v-model="fromData.pwd"
            show-password
            prefix-icon="iconfont icon-tianchongxing-"
          ></el-input>
        </el-form-item>
         <el-form-item>
          <el-input
            v-model="fromData.input"
            clearable
            style="width:210px;margin-right: 10px;"
            placeholder="请输入验证码"
            prefix-icon="iconfont icon-yanzhengma"
          ></el-input>
          <!-- 验证码组件 -->
          <index></index>
        </el-form-item>
        <el-form-item class="radio">
            <el-radio-group v-model="radio">
            <el-radio :label="1">学生</el-radio>
            <el-radio :label="2">老师</el-radio>
            <el-radio :label="3">管理员</el-radio>
            </el-radio-group>
        </el-form-item>
        <!-- 按钮 -->
        <!-- plain属性：是否是朴素按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="Longin_method">登录</el-button>
          <el-button type="primary" @click="Register_method">注册</el-button>
          <el-button type="info" :plain="true" @click="return_method">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<!-- js代码 -->

<script>
// 引入验证码组件
import index from "@/views/login/validate/index"
export default {
  components:{index},
  data() {
    return {
      radio:1,
      fromData: {
        user: "", //账号
        pwd: "", //密码
        input:""
      },
      exists: false, //用户（账号、密码都正确）是否存在，默认为：false
      fromRules: {
        //验证账户是否合法（配置验证规则）,required为true：必填项   message：规则触发后显示的信息
        //trigger：什么时候触发   blur：焦点离开时触发
        //min:最小值    max：最大值
        //account名称必须要与fromData中的名称一致
        user: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 11, message: "账号的长度范围为3-11", trigger: "blur" }
        ],
        //验证密码是否合法（配置验证规则）
        //pwd名称必须要与fromData中的名称一致
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 15, message: "密码的长度范围为6-15", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 返回
    return_method() {},
    //登录按钮事件函数
    Longin_method() {},
    //注册按钮事件函数
    Register_method() {}
  }
};
</script>

<!-- 组件样式 -->
<!-- less：支持less语法。   scoped：样式的范围，加了scoped样式只能在该组件内有效，反之，全局都有效 -->
<style lang='less' scoped>
.radio{
    margin-left: 44px;
}
.login {
  background-color: #283443;
  background-size: 100% 100%;
  height: 100%;
}
#login_box {
  height: 390px;
  width: 550px;
  background-color: white;
  border-radius: 20px; //圆角，设置边框的弧度
  position: absolute; //相对定位（相对于父节点）
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); //相对于自身定位
  // opacity: 0.7;
}
.btns {
  margin-left: 45px;
  display: flex; //display属性：布局，flex：flex布局
  justify-content: flex-start; //justify-content：水平方向，flex-start：开头、首部
}
.loginFrom {
  position: absolute;
  top: 20%;
  left: 3%;
}
#Login_page {
  height: 100%;
  text-align: center;
}
</style>
<!-- 全局样式 -->
<style>
.myMessage {
  /* 如果想要给emelemt组件添加样式，就必须写在全局样式内。不能写在scoped内 */
  min-width: 280px !important; /* min-width：宽度最小值为280px  */
}
/* 将输入框与验证码对齐 */
.input,canvas{
  vertical-align:middle;
}
</style>